<template>
  <div style="margin-top: -2px">
    <canvas ref="dashboardCanvas" width="60" height="60"></canvas>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const dashboardCanvas = ref(null)
let radius
let centerX
let centerY

onMounted(() => {
  const canvas = dashboardCanvas.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    radius = canvas.width / 2
    centerX = canvas.width / 2
    centerY = canvas.height / 2
    drawDashboard(ctx, canvas.width, canvas.height)
  }
})

const drawDashboard = (ctx, width, height) => {
  // 清空画布
  ctx.clearRect(0, 0, width, height)
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius - 2, Math.PI * 0.5, Math.PI * 1.5)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(centerX, centerY - radius + 1)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX, centerY + 15)
  ctx.lineTo(centerX, centerY + radius - 1)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX - 15, centerY)
  ctx.lineTo(centerX - radius + 1, centerY)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX, centerY - radius + 2)
  ctx.lineTo(centerX + 7, centerY - radius + 2)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX, centerY + radius - 2)
  ctx.lineTo(centerX + 7, centerY + radius - 2)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.moveTo(centerX + 7, centerY + radius - 2)
  ctx.lineTo(centerX + 7, centerY - radius + 2)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  ctx.closePath()
}
</script>
